<template>
  <el-popover placement="bottom-start" trigger="click">
    <el-input v-model="selected.name" placeholder="请选择" readonly :style="{width: inputWidth,cursor:'pointer'}"
              suffix-icon="el-icon-search" slot="reference"></el-input>
    <dict-panel :dict-key="dictKey" :current="selected.id" show-search show-refresh show-clear
                @change="dictChangeHandler"></dict-panel>
  </el-popover>
</template>

<script>
import DictPanel from "@/components/internal/dict/DictPanel";

export default {
  name: "DictInput",
  components: {DictPanel},
  props: {
    dictKey: {
      type: String,
      required: true
    },
    current: {
      type: Object,
      default() {
        return {
          id: '',
          name: ''
        };
      }
    },
    inputWidth: {
      type: String,
      default: '200px'
    }
  },
  data() {
    return {
      selected: {
        id: null,
        name: null
      }
    };
  },
  created() {
  },
  watch: {
    current: {
      handler(newObject) {
        if (newObject.id) {
          this.selected.id = newObject.id;
          this.selected.name = newObject.name;
        } else {
          this.selected.id = null;
          this.selected.name = null;
        }
      },
      deep: true
    }
  },
  methods: {
    dictChangeHandler(row) {
      this.selected.id = row.id;
      this.selected.name = row.name;
      this.$emit('change', Object.assign({}, row));
    }
  }
}
</script>

<style scoped>

</style>
